<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta contentType="application/x-www-form-urlencoded">
<link rel="icon" th:href="@{~/fileup/image/common/deep_pro.ico}" type="image/x-icon" />
<script th:src="@{~/fileup/plugin/js/jquery-3.1.1.min.js}" type="text/javascript"></script>
	<!-- bootstrap main js -->
	<script type="text/javascript" th:src="@{~/fileup/plugin/js/bootstrap.min.js}"></script>
	<!-- fileinput main js -->
	<script type="text/javascript" th:src="@{~/fileup/plugin/js/fileinput.min.js}"></script>
	<!-- chn language js -->
	<script type="text/javascript" th:src="@{~/fileup/plugin/js/zh.js}"></script>
	<!-- bootstrap theme -->
	<link rel="stylesheet" type="text/css" th:href="@{~/fileup/plugin/css/bootstrap.min.css}">
	<!-- fileinput theme -->
	<link rel="stylesheet" type="text/css" th:href="@{~/fileup/plugin/css/fileinput.min.css}">
<title>人工智能—文字识别</title>
</head>
<body>
<div class="container">
<!--通用文字识别-->
<div class="row">
	<h3>001.通用文字识别举例</h3>
	<form enctype="multipart/form-data" id="ocr-form" action="/ocr" method="post">
		<div class="col-lg-6">
			<div class="form-group">
				<input type="file" name="file" id="file1" class="file">
			</div>
		</div>
		<div class="col-lg-6">
			<h4>通用文字识别解析结果：</h4>
			<span id="res"></span>
		</div>
	</form>
</div>
<!--身份证识别-->
<div class="row">
<h3>002.身份证识别举例</h3>
<form enctype="multipart/form-data" id="idCard-form" action="/idCard" method="post">
	<div class="col-lg-6">
		<div class="form-group">
			<input type="file" name="file_idcard" id="file2" class="file" multiple data-min-file-count="2">
		</div>
	</div>
	<div class="col-lg-6">
		<h4>身份证识别结果：</h4>
		<div class="col-lg-6">
			正面：<br>姓名：<span id="res_name"></span><br>
			性别：<span id="res_sex"></span>&nbsp;&nbsp;<br>民族：<span id="res_nation"></span><br>
			出生：<span id="res_bera"></span><br>
			住址：<span id="res_address"></span><br>
			公民身份证号码：<span id="res_cardNumber"></span>
		</div>
		<div class="col-lg-6">
			背面：<br>签发日期：<span id="res_start"></span>&nbsp;&nbsp;<br>失效日期：<span id="res_end"></span><br>
			签发机关：<span id="res_office"></span>
		</div>
	</div>
</form>
</div>



</div>
<script>
	//001.通用文字识别
		//fileupload中文api:https://blog.csdn.net/u012526194/article/details/69937741
    $("#file1").fileinput({
        uploadUrl: '/ocr', //你必须在这里设置一个有效的URL，否则你会得到一个错误
        uploadAsync: true, //AJAX设置同步，异步的上传方式 （同步）
        allowedFileExtensions: ['jpg', 'png', 'gif'],//文件类型
        showUpload: true, //是否显示上传按钮
        //browseClass: "btn btn-primary", //按钮样式
        showRemove : true, //显示移除按钮
        dropZoneEnabled: true,//是否显示拖拽区域
        overwriteInitial: false,
        //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
        maxFilesNum: 10,
        maxFileCount: 4, //表示允许同时上传的最大文件个数
        minFileCount: 0,	//最少文件
        dropZoneTitle: '选择一张带有文字的图片',
        validateInitialCount:false//异步上传返回结果处理
    }).on('fileuploaded', function(event, data, previewId, index) {
		// alert(JSON.stringify(data));
		var res_arr = data.response.words_result;
		for(var key in res_arr){
			console.log(res_arr[key].words);
			$('#res').append(res_arr[key].words + "<br/>");
		}
    });
    //002.身份证识别
    $("#file2").fileinput({
        uploadUrl: '/idCard',
        uploadAsync: false,
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        //browseClass: "btn btn-primary", //按钮样式
        //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
        maxFileCount: 2,
        minFileCount: 2,
		layoutTemplates: {
            actionUpload: ''	//去掉略缩图中的上传按钮，去掉哪个就设置哪个
		},
        dropZoneTitle: '选择两张图片，第一张正面，第二张国徽面'
    }).on('filebatchuploadsuccess', function(event, data, previewId, index) {
        var res_b_arr = data.response.back;		//背面
        var res_f_arr = data.response.front;	//正面
		$('#res_name').text(res_f_arr.words_result.姓名.words);	//正面信息
        $('#res_sex').text(res_f_arr.words_result.性别.words);
        $('#res_bera').text(res_f_arr.words_result.出生.words);
        $('#res_nation').text(res_f_arr.words_result.民族.words);
        $('#res_address').text(res_f_arr.words_result.住址.words);
        $('#res_cardNumber').text(res_f_arr.words_result.公民身份号码.words);
        $('#res_start').text(res_b_arr.words_result.签发日期.words);		//背面信息
        $('#res_end').text(res_b_arr.words_result.失效日期.words);
        $('#res_office').text(res_b_arr.words_result.签发机关.words);
    });
</script>
</body>
</html>